<template>
    <div class="person">
        <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
        <van-cell value="头像" is-link @click="setAvatar">
            <div class="img-box">
                <img :src="store.$state.user_avator" alt="" />
            </div>
            <template #title>
                <span class="custom-title">头像</span>
            </template>
        </van-cell>
        <van-cell :value="store.$state.user_nick_name" is-link @click="setName">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">昵称</span>
            </template>
        </van-cell>
        <van-cell value="" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">我的签名</span>
            </template>
        </van-cell>
        <van-cell value="" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">会员等级</span>
            </template>
        </van-cell>
        <van-cell value="" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">我的二维码</span>
            </template>
        </van-cell>
        <van-cell value="1671003f32" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">我的潮流口令</span>
            </template>
        </van-cell>
        <van-cell value="性别" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">选性别</span>
            </template>
        </van-cell>
        <van-cell value="生日" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">请填写出生日期</span>
            </template>
        </van-cell>
        <van-cell value="" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">身高</span>
            </template>
        </van-cell>
        <van-cell value="" is-link>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">体重</span>
            </template>
        </van-cell>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserInfo } from "../../store/user";
import { getAvatorNickName } from "../../api/index";

const store = useUserInfo();
let router = useRouter();
let route = useRoute();

const onClickLeft = () => history.back();

// let userlist = reactive({
//     list: [],
// });

const setAvatar = () => {
    router.push({
        name: "avatar",
    });
};

const setName = () => {
    router.push({
        name: "modname",
    });
};

// getAvatorNickName({ user_id: 1 }).then((res: any) => {
//     console.log(res);
//     if (res.code == 200) {
//         userlist.list = res.data[0];
//     }
//     console.log(userlist);
// });
</script>

<style lang="scss" scoped>
.person {
    .img-box {
        margin-left: auto;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
        }
    }
}
:deep(.van-nav-bar) {
    background: #353535;
}
:deep(.van-nav-bar .van-icon) {
    color: #fff;
}
:deep(.van-nav-bar__title) {
    color: #fff;
    font-weight: normal;
}
:deep(.van-cell) {
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
</style>
